<template>
  <div>
    <leftRightSplit :left-span="4">
      <template #left>
        <ContentWrap title="流程应用分类">
          <treeDic
            v-model="queryParam.FlowType"
            :dic-id="DictItemDic.flowType"
            @change="loadFlowType"
            @load="loadDic"
          />
        </ContentWrap>
      </template>
      <template #right>
        <ContentWrap :title="title">
          <div class="app-container">
            <Search
              ref="search"
              :schema="schema"
              :model="queryParam"
              :is-col="false"
              layout="inline"
              :showSearch="true"
              button-position="left"
              :search-loading="loading"
              :reset-loading="loading"
              @search="search"
              @reset="search"
            >
              <template #opts>
                <BaseButton v-hasPermi="'add'" type="success" @click="addFlow()"
                  >新增流程</BaseButton
                >
              </template>
            </Search>
          </div>
          <Table
            :data="flowList"
            :columns="columns"
            row-key="Id"
            :pagination="paging"
            @change="load"
          >
            <template #createName="e">
              <span class="rowSpan">{{ e.row.CreateName }}</span>
              <span class="rowSpan">{{ $formatTime(e.row.CreateTime, 'yyyy-MM-dd HH:mm') }}</span>
            </template>
            <template #flowType="e">
              <span v-if="flowType[e.row.FlowType]"> {{ flowType[e.row.FlowType].text }}</span>
            </template>
            <template #status="e">
              <el-switch
                :disabled="$hasPermi('set') == false"
                v-model="e.row.Status"
                :inactive-value="2"
                :active-value="1"
                :inactive-text="e.row.Status == 0 ? FlowStatus[0].text : FlowStatus[2].text"
                active-text="启用"
                @change="(val) => setStatus(e.row, val)"
              />
            </template>
            <template #action="e">
              <BaseButton
                size="small"
                type="primary"
                :icon="viewIcon"
                title="编辑流程"
                circle
                @click="editFlow(e.row)"
              />
              <BaseButton
                v-hasPermi="'copy'"
                v-if="e.row.Status !== 0"
                size="small"
                type="warning"
                :icon="copyIcon"
                title="复制流程"
                circle
                @click="copyFlow(e.row)"
              />
              <BaseButton
                v-hasPermi="'set'"
                v-if="e.row.Status !== 1"
                :icon="editIcon"
                size="small"
                type="primary"
                title="编辑流程信息"
                circle
                @click="edit(e.row)"
              />
              <template v-if="e.row.SourceId == null">
                <BaseButton
                  v-hasPermi="'delete'"
                  v-if="e.row.Status === 0"
                  size="small"
                  :icon="dropIcon"
                  type="danger"
                  title="删除流程"
                  circle
                  @click="deleteFlow(e.row)"
                />
              </template>
              <template v-else>
                <BaseButton
                  v-hasPermi="'delete'"
                  v-if="e.row.Status !== 1"
                  size="small"
                  :icon="dropIcon"
                  title="删除流程"
                  type="danger"
                  circle
                  @click="deleteFlow(e.row)"
                />
              </template>
            </template>
          </Table>
        </ContentWrap>
      </template>
    </leftRightSplit>
    <editFlowInfo
      :id="id"
      :flow-type="queryParam.FlowType"
      v-model:visible="infoVisible"
      @close="close"
    />
    <copyFlow :id="id" v-model:visible="copyVisible" @close="close" />
  </div>
</template>

<script>
import { treeDic } from '@/components/base/'
import { DictItemDic, EnumDic, FlowStatus } from '../../config/flowConfig'
import * as flowApi from '../../api/flow'
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
import { useIcon } from '@/hooks/web/useIcon'
import copyFlow from './components/copyFlow.vue'
import editFlowInfo from './components/editFlowInfo.vue'
export default {
  components: {
    treeDic,
    Table,
    Search,
    copyFlow,
    editFlowInfo
  },
  data() {
    return {
      EnumDic,
      DictItemDic,
      FlowStatus,
      loading: false,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      shareIcon: useIcon({ icon: 'ep:share' }),
      viewIcon: useIcon({ icon: 'ep:view' }),
      copyIcon: useIcon({ icon: 'ep:copy-document' }),
      flowList: [],
      label: '全部流程',
      id: null,
      infoVisible: false,
      copyVisible: false,
      flowType: {},
      queryParam: {
        Status: [],
        QueryKey: null,
        FlowType: null
      },
      schema: [
        {
          field: 'QueryKey',
          label: '流程名',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '流程名'
          }
        },
        {
          field: 'Status',
          label: '流程状态',
          component: 'EnumItem',
          componentProps: {
            dicKey: EnumDic.FlowStatus,
            multiple: true,
            sysHead: 'flow',
            placeholder: '流程状态'
          }
        }
      ],
      columns: [
        {
          field: 'FlowName',
          label: '流程名',
          align: 'left',
          minWidth: 250
        },
        {
          sortby: 'FlowType',
          field: 'FlowType',
          label: '流程分类',
          align: 'center',
          width: 120,
          slotName: 'flowType',
          sortable: 'custom'
        },
        {
          field: 'FormName',
          label: '默认表单名',
          align: 'left',
          minWidth: 150
        },
        {
          field: 'Remark',
          label: '备注',
          align: 'left',
          minWidth: 150
        },
        {
          field: 'VerNum',
          label: '版本号',
          align: 'center',
          width: 120
        },
        {
          field: 'Status',
          label: '流程状态',
          align: 'center',
          slotName: 'status',
          width: 200,
          sortable: 'custom'
        },
        {
          field: 'CreateTime',
          label: '创建人',
          align: 'center',
          slotName: 'createName',
          sortable: 'custom',
          width: 150
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          width: 200,
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    close(isRefresh) {
      if (isRefresh) {
        this.reset()
      }
    },
    copyFlow(row) {
      this.id = row.Id
      this.copyVisible = true
    },
    addFlow() {
      this.id = null
      this.infoVisible = true
    },
    editFlow(row) {
      this.$router.replace({ name: 'flowNodeEdit', params: { id: row.Id } })
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.Status = null
      this.load()
    },
    loadDic(e) {
      this.flowType = e.cache
      this.reset()
    },
    loadFlowType(e) {
      if (this.queryParam.FlowType == null) {
        this.title = '全部流程'
      } else {
        this.title = e.tree[this.queryParam.FlowType].text + '流程列表'
      }
      this.load()
    },
    search(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.Status = data.Status
      this.load()
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await flowApi.Query(this.queryParam, curPaging)
      if (res.List) {
        this.flowList = res.List
      } else {
        this.flowList = []
      }
      this.paging.total = res.Count
    },
    async setStatus(row, value) {
      if (value === 1) {
        const res = await flowApi.Enable(row.Id)
        if (res.IsError) {
          this.$message({
            type: 'error',
            message: '流程存在错误!'
          })
          return
        }
      } else {
        await flowApi.Disable(row.Id)
      }
      row.Status = value
    },
    edit(row) {
      this.id = row.Id
      this.infoVisible = true
    },
    deleteFlow(row) {
      const title = '确认删除流程:' + row.FlowName + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await flowApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.reset()
    }
  }
}
</script>
<style scoped>
.rowSpan {
  display: inherit;
  width: 100%;
}
</style>
